<!-- 某俱乐部打球卡列表 -->
<template>
	<view class="vipcard">
		<view class="tip" id="header-top">
			温馨提示：打球卡金额仅限用户购买俱乐部活动时使用。
		</view>
		<view class="head">
			<view class="top">
				<view class="con">
					<image v-if="clubData.clubIcon" :src="clubData.clubIcon" ></image>
					<image v-else :src="'@/static/images/image-default.png'|addBaseImgUrl" mode>
					<view class="jlbname line-clamp-2">{{clubData.clubName}}</view>
				</view>
				<view class="costtit">
					<text class="tit1">总余额：</text>
					<text class="tit2">¥</text>
					<text class="tit3">{{clubData.account | floorTwo}}</text>
				</view>
			</view>
			<view class="shuoming">
				<text class="tit">使用说明：</text>
				<text v-if="clubData.cardDescription" class="titcon">{{clubData.cardDescription}}</text>
				<template v-else>
          <view>1.您购买的打球卡，可用来购买俱乐部发布的所有活动。</view>
          <view>2.购买成功后，您可以随时通过"我的-我的卡券-打球卡"，查询余额或进行充值。</view>
        </template>
			</view>
		</view>
		<view class="vipwrap" v-if="cardList.length">
			<view :class="changeIndex==index?'vipcon act':'vipcon'" @click="changeCost(item,index)" v-for="(item,index) in cardList" :key="index">
				<view class="textflex">
					<text class="blue1">{{item.store}}</text>
					<text class="blue2">元</text>
				</view>
				<text class="ccc">售价 ¥{{item.cost}}</text>
			</view>
		</view>
		<xjx-nodata v-if="cardList.length==0 && listFlag" :marginTop="'50px'"></xjx-nodata>
		<view class="botwrap" v-if="cardList.length">
			<view class="con">
				<view>
					<text class="tit1">应付金额：</text>
					<text class="tit2">¥</text>
					<text class="tit3">{{cost}}</text>
				</view>
				<view @click="payorder" class="btn">立即充值</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				cardList: [],
				clubData:{},
				cost:'',
				changeIndex:0,
				cardId:'',
				store:'',
				ONOFF:true,
				listFlag:false,
				needPayId: '', // 是否有其他订单，需要在买完会员卡后，去继续支付
			};
	  },
	  onLoad(data) {
			this.clubId = data.clubId || ''
			this.needPayId = data.needPayId || ''
			if(this.clubId){
				this.getVipCardList()
				this.getByClubIdVip()
			}
	  },
		onShow() {
			
		},
		computed:{
			...mapState(['userInfo','accessToken','position']),
		},
	  methods:{
			async getVipCardList(){
				const param = {
					'ACCESS-TOKEN': this.accessToken
				}
				const res = await this.$api.getClubVipCard(param, this.clubId)
				if(res && res.code == 200) {
					this.listFlag = true
					let arr = res.data
					if(res.data.length){
						arr.sort(function(a, b) {
							return a.store - b.store;
						});
						this.cost = arr[0].cost
						this.store = arr[0].store
						this.cardId = arr[0].id
						this.cardList = arr
					}
				}
			},
			async getByClubIdVip() {//在这俱乐部下面的余额
				const param = {
					'ACCESS-TOKEN': this.accessToken
				};
				const res = await this.$api.getByClubIdVip(param,this.clubId);
				if (res && res.code == 200) {
					if(res.data){
						this.clubData = res.data
					}else{
						this.getClubInfo()
					}
				}
			},
			async getClubInfo(){//俱乐部详情
				const param = {
					'ACCESS-TOKEN': this.accessToken,
				}
				const res = await this.$api.getClubDetail(param, `${this.clubId}?x=${this.position.lng}&y=${this.position.lat}`)
				if(res && res.code == 200){
					this.clubData = res.data
					this.clubData.account=0
				}
			},
			changeCost(item,index){
				this.changeIndex = index
				this.cardId = item.id
				this.cost = item.cost
				this.store = item.store
			},
      toBuy(id){
				uni.navigateTo({
					url: `/mainProcess/confirmOrder/confirmOrder?id=${id}&type=vip`
				})
			},
			payorder() {
				if (this.ONOFF) {
					this.ONOFF = false;
					let data = {};
						data = {
							"ACCESS-TOKEN": this.accessToken,
							cardId: this.cardId,
							cost: this.store,
							amount: this.cost, //实际要支付的钱
							type: "3",
							playerId: "",
							points: "0", //积分
							isToken: "0",
							// playerSkillLevel:this.userInfo.playerSkillLevel,
						};
						this.createOrder(data);
				}
    	},
			createOrder(data) {
				this.$api.createOrder(data).then(res => {
					if (res && res.code == "200") {
						this.payId = res.data.id
						if(this.cost==0 || this.cost==0.00 || this.cost==0.0){
							uni.reLaunch({
								url: `/mainProcess/confirmOrder/payResult?id=${res.data.id}&type=vip`
							})
						}else{
							let url = `/mainProcess/confirmOrder/payType?id=${res.data.id}`
							
							if(this.needPayId){
								url+=`&needPayId=${this.needPayId}`
							}
							uni.navigateTo({
								url: url
							});
							this.ONOFF = true;
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
						this.ONOFF = true;
					}
					
				});
			},
			toPayResult(){
				let url_ = ''
				url_= `/mainProcess/confirmOrder/payResult?id=${this.payId}&type=vip`
				uni.reLaunch({
					url: url_
				})
				this.ONOFF = true;
			},
    }
	}
</script>

<style scoped lang="scss">
	.vipcard{
		background-color:#f2f2f2;
		padding-bottom:140rpx;
		min-height:100vh;
		width:750rpx;
		
		.tip{
			width: 100%;
			height: 66rpx;
			line-height: 66rpx;
			background: #EEF5FE;
			color: #999999;
			font-size: 26rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
		.head{
			width:100%;
			background-color:#fff;
			padding:20rpx 6rpx 0;
			.top{
				background:url($public-baseImgUrl+'mine/vipcard-bg.png') no-repeat;
				width:738rpx;
				height:274rpx;
				background-size:738rpx 274rpx;
				padding:20rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				.con{
					display: flex;
					align-items: center;
					image{
						width:100rpx;
						height:100rpx;
						flex-shrink: 0;
						border-radius: 50%;
						margin-right:20rpx;
						border: 10rpx solid rgba(255, 255, 255, 0.15);
					}
					.jlbname{
						font-size:30rpx;
						color:#fff;
					}
				}
				.costtit{
          margin-top: 40rpx;
					padding-left:140rpx;
					.tit1{
						font-size:24rpx;
						color:#96C2FC;
					}
					.tit2{
						font-size:24rpx;
						margin-right:5rpx;
						color:#fff;
					}
					.tit3{
            line-height: 42rpx;
						font-size:42rpx;
						color:#fff;
						// font-weight: bold;
					}
				}
				
			}
			.shuoming{
				padding:20rpx 39rpx;
				line-height: 30rpx;
				.head{
					display:flex;
					justify-content: space-between;
					.righttit{
						font-size:26rpx;
						color:#2E87FF;
						display: flex;
						align-items: center;
						>text{
							margin-right:8rpx;
						}
					}
				}
				view,text {
					font-size: 24rpx;
					color: #999;
				}
				.tit{
					display: block;
					font-size:28rpx;
					color:#999;
					line-height:40rpx;
					margin-bottom:6rpx;
				}
				.titcon{
					font-size:24rpx;
					color:#999;
					line-height: 40rpx;
				}
			}
		}
		.vipwrap{
			padding:30rpx 10rpx;
			display: flex;
			flex-wrap:wrap;
			.vipcon{
				width:225rpx;
				height:161rpx;
				border-radius:25rpx;
				box-shadow: 0px 5rpx 5rpx 0px rgba(204, 204, 204, 0.5);
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: center;
				align-content: center;
				margin-right:28rpx;
				margin-bottom:30rpx;
				background-color:#fff;
				&.act{
					background:url($public-baseImgUrl+'icon-checked-corner.png') no-repeat top right #fff;
					background-size:62rpx 57rpx;
					border:1px solid #2E87FF;
				}
				&:nth-child(3n){
					margin-right:0;
				}
				.textflex{
					text-align: center;
					width:100%;
				}
				.blue1{
					font-size:36rpx;
					color:#2E87FF;
					// font-weight: bold;
				}
				.blue2{
					font-size: 24rpx;
					color:#2E87FF;
				}
				.ccc{
					display:block;
					font-size:24rpx;
					color:#999;
				}
			}
		}
		.add-card-btn {
			height: 90rpx;
			position: fixed;
			bottom: 30rpx;
			line-height: 90rpx;
			width: 690rpx;
			left: 50%;
			margin-left: -345rpx;
			border-radius: 45rpx;
			background-color: $public-color-blue1;
			color: #ffffff;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
		}
		.botwrap{
			height: 139rpx;
			width:100%;
			background-color:#fff;
			position: fixed;
			bottom:0;
			left:0;
			padding:15rpx 10rpx;
			.con{
				align-items: center;
				display: flex;
				justify-content: flex-end;
				>view{
					
				}
			}
			.tit1{
				font-size:24rpx;
				color:#999;
				text-align: bottom;
			}
			.tit2{
				font-size:24rpx;
				color:#FDB42E;
				text-align: bottom;
			}
			.tit3{
				font-size:42rpx;
				color:#FDB42E;
				font-weight: bold;
				margin-right:30rpx;
				text-align: bottom;
			}
			.btn{
				padding:0 57rpx;
				background-color:#2E87FF;
				border-radius: 78rpx;
				color:#fff;
				height:78rpx;
				line-height:78rpx;
				box-sizing: border-box;
			}
		}
		
	}
	
</style>
